<template>
  <div class="bodybox">
    <quitLogin :phoneStatus="excitingStatus"
               @exitCilck="exitCilck"
               :quitphone="quitphone" />
    <img src="@/assets/images/one/bg.png"
         class="bgimg">
    <!-- 广告图 -->
    <div class="swipebox">
      <van-swipe class="my-swipe"
                 :autoplay="3000"
                 indicator-color="white">
        <van-swipe-item @click="banclick('https://dx.10086.cn/pnj8Eg')"> <img src="@/assets/images/ban.jpg"></van-swipe-item>
        <van-swipe-item @click="banclick('https://dx.10086.cn/Kh0dEw')"> <img src="@/assets/images/ban2.jpg"></van-swipe-item>
      </van-swipe>
    </div>

    <!-- 商品区 -->
    <commodity @moreClick="moreClick" />
    <!-- 一键登录 -->
    <loginModel :excitingStatus="excitingStatus"
                :loginStatus="loginStatus"
                @shutClick="shutClick"
                @showYzmLogin="showYzmLogin"
                @onekeyLogin="onekeyLogin"
                @loginClick="loginClick" />
  </div>

</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, ref, getCurrentInstance, onMounted } from 'vue'
import loginModel from '@m/onekey-login/index.vue'
import commodity from '@m/commodity/index.vue'
import quitLogin from '@m/quitLogin/index.vue'

// import md5 from 'blueimp-md5'
// ~@/assets/logo.png
import { useRoute, useRouter } from 'vue-router'
// 格式化日期的
import { formatDate } from '@/utils/common'
import userApi from '@/api/mobile_user/index'
import { Toast, Dialog } from 'vant'
import { Storage } from '@/utils/Storage'
import { MOBILE_TOKEN, MOBILE_USER } from '@/store/mutation-types'
import { useStore } from '@/store'
import { recordCilck } from '@/utils/record'

export default defineComponent({
  name: 'Login',
  components: { loginModel, commodity, quitLogin },
  setup() {
    const { proxy }: any = getCurrentInstance()
    const store = useStore()
    const router = useRouter()
    const route = useRoute()
    const state: any = reactive({
      num: 10,
      excitingStatus: false,
      quitphone: '',
      loginStatus: false
    })
    function exitCilck() {
      proxy.excitingStatus = true
      Storage.remove(MOBILE_TOKEN)
    }
    function phoneCilck() {
      console.log('负面')
    }

    function goParticulars() {
      console.log('跳转')
      router.push({
        name: 'particulars',
        params: {
          id: '123',
          name: 'nick'
        }
      })
    }
    function banclick(link) {
      recordCilck('点击广告图', link)
      window.location.href = link
      Webapph5.pushTrack({ eventmsg: '广告图', eventid: link })
    }
    function moreClick(data) {
      console.log(data, 'sdsdsd')
      Webapph5.pushTrack({ eventmsg: data.name + '更多', eventid: '1' })

      recordCilck(data.name + '更多', '-')
      if (data.name == '拍照手机') {
        router.push({
          name: 'particulars',
          query: { name: '拍照手机' }
        })
        return
      }
      if (data.name == '开黑手机') {
        router.push({
          name: 'particulars',
          query: { name: '开黑手机' }
        })
        return
      }
      if (data.name == '儿童手表') {
        router.push({
          name: 'watches',
          query: { name: '儿童手表' }
        })
        return
      }
      if (data.name == '运动手表') {
        router.push({
          name: 'watches',
          query: { name: '运动手表' }
        })
        return
      }
      if (data.name == '安防设备') {
        router.push({
          name: 'watches',
          query: { name: '安防设备' }
        })
        return
      }
    }
    // 关闭--组件
    function shutClick() {
      proxy.excitingStatus = false
    }
    // 验证码登录
    function showYzmLogin() {
      proxy.loginStatus = true
    }
    // // 一键登录
    function onekeyLogin() {
      console.log('ddddddddd')
      localStorage.removeItem('h5type')

      // proxy.excitingStatus = false
      proxy.excitingStatus = false
      let loading = Toast.loading({
        message: '登录中...',
        forbidClick: true,
        duration: 0
      })
      // 成功
      let success = function successCallback(msgidKey) {
        console.info(msgidKey, '一键登录获取msgidKey成功11')
        let req = {
          msgidKey: msgidKey,
          vChannel: ''
        }
        userApi.setToken(req).then((res) => {
          loading.clear()
          if (res.status == 'msg00004') {
            Toast(res.myMsg || '一键登录失败，请使用验证码登录')
            proxy.excitingStatus = true
            proxy.loginStatus = true
          } else {
            console.log(res.phone, '本地保存', res.token)
            // localStorage.setItem('h5phone', res.phone)
            // localStorage.setItem('h5token', res.token)
            Storage.set(MOBILE_TOKEN, res.token, 30 * 60)
            Storage.set(MOBILE_USER, res, 30 * 60)
            localStorage.setItem('h5phone', res.phone)
            localStorage.setItem('h5type', res.type)
            state.quitphone = res.phone
            store.commit('user/setMobileToken', res.token)
            store.commit('user/setMobileInfo', res)
            Webapph5.pushTrack({ eventmsg: '一键登录统计', eventid: res.phone })
          }
        })
      }
      //  失败
      let fail = function failCallback() {
        loading.clear()
        Toast({
          message: '一键登录失败，请使用验证码登录',
          position: 'top'
        })
        proxy.excitingStatus = true
        proxy.loginStatus = true
      }
      // 执行
      //@ts-ignore
      Login.login(success, fail)
    }
    // // 手机号登录
    function loginClick(phone, yzmCode) {
      if (phone === '' && yzmCode === '') {
        Toast('手机号或验证码不能为空')
      } else {
        let req = {
          phone: phone,
          smsCode: yzmCode
        }
        userApi.messagelogin(req).then((res) => {
          console.log(res, '验证码登录dddddddd')
          if (res.userInfo.phone) {
            Toast('登录成功')
            proxy.excitingStatus = false
            // localStorage.setItem('h5phone', res.phone)
            // localStorage.setItem('h5token', res.token)
            Storage.set(MOBILE_TOKEN, res.userInfo.token, 30 * 60)
            Storage.set(MOBILE_USER, res.userInfo, 30 * 60)
            localStorage.setItem('h5phone', res.userInfo.phone)
            localStorage.setItem('h5type', res.userInfo.type)
            store.commit('user/setMobileToken', res.userInfo.token)
            store.commit('user/setMobileInfo', res.userInfo)
            state.quitphone = res.phone
            Webapph5.pushTrack({ eventmsg: '验证码登录', eventid: res.userInfo.phone })
          } else {
            Toast(res.retMsg + '请重新尝试' || '登录失败请重新尝试')
          }
        })
      }
    }
    // 组件-完
    onMounted(() => {
      if (!Storage.get(MOBILE_TOKEN)) {
        proxy.excitingStatus = true // 记得改dui
        // proxy.excitingStatus = false
      }
    })

    return {
      ...toRefs(state),
      shutClick,
      loginClick,
      onekeyLogin,
      showYzmLogin,
      goParticulars,
      moreClick,
      banclick,
      exitCilck,
      phoneCilck
    }
  }
})
</script>

<style lang="scss" scoped>
.bodybox {
  background: #6b0609;
  overflow: hidden;
  .bgimg {
    width: 375px;
  }
  // .swipebox {
  //   margin-top: -30px;
  //   text-align: center;
  //   img {
  //     width: 348px;
  //   }
  // }
  .swipebox {
    margin-top: -30px;
    padding: 0 20px 0px 20px;
    .my-swipe .van-swipe-item {
      height: 76px;
      line-height: 76px;
      img {
        width: 350px;
      }
    }
  }
}
</style>
